
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont ic-quxiao"></i>
                    <div class="name">取消</div>
                    <div class="fontclass">.ic-quxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-tianjiagequ"></i>
                    <div class="name">添加歌曲</div>
                    <div class="fontclass">.ic-tianjiagequ</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-genghuanbizhi"></i>
                    <div class="name">更换壁纸2</div>
                    <div class="fontclass">.ic-genghuanbizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-paixingshangsheng"></i>
                    <div class="name">排行-上升</div>
                    <div class="fontclass">.ic-paixingshangsheng</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-paixingxiajiang"></i>
                    <div class="name">排行-下降</div>
                    <div class="fontclass">.ic-paixingxiajiang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-paixingbubian"></i>
                    <div class="name">排行-不变</div>
                    <div class="fontclass">.ic-paixingbubian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-new"></i>
                    <div class="name">new</div>
                    <div class="fontclass">.ic-new</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.ic-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiangshang"></i>
                    <div class="name">向上</div>
                    <div class="fontclass">.ic-xiangshang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiangxia"></i>
                    <div class="name">向下</div>
                    <div class="fontclass">.ic-xiangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiangyou"></i>
                    <div class="name">向右</div>
                    <div class="fontclass">.ic-xiangyou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-liebiaoshanchu"></i>
                    <div class="name">列表_删除</div>
                    <div class="fontclass">.ic-liebiaoshanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibofahongbao"></i>
                    <div class="name">直播_发红包</div>
                    <div class="fontclass">.ic-zhibofahongbao</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibofaliwu"></i>
                    <div class="name">直播_发礼物</div>
                    <div class="fontclass">.ic-zhibofaliwu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboqiapiandanmu"></i>
                    <div class="name">直播_卡片弹幕</div>
                    <div class="fontclass">.ic-zhiboqiapiandanmu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboqiapiandianzan"></i>
                    <div class="name">直播_卡片点赞</div>
                    <div class="fontclass">.ic-zhiboqiapiandianzan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboqiapianqinwen"></i>
                    <div class="name">直播_卡片亲吻</div>
                    <div class="fontclass">.ic-zhiboqiapianqinwen</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboqiapianshijian"></i>
                    <div class="name">直播_卡片时间</div>
                    <div class="fontclass">.ic-zhiboqiapianshijian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibubiaoqian"></i>
                    <div class="name">底部_标签</div>
                    <div class="fontclass">.ic-dibubiaoqian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibubiaoqing"></i>
                    <div class="name">底部_表情</div>
                    <div class="fontclass">.ic-dibubiaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibugengduogongneng"></i>
                    <div class="name">底部_更多功能</div>
                    <div class="fontclass">.ic-dibugengduogongneng</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibujianpan"></i>
                    <div class="name">底部_键盘</div>
                    <div class="fontclass">.ic-dibujianpan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibuluyin"></i>
                    <div class="name">底部_录音</div>
                    <div class="fontclass">.ic-dibuluyin</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibushipin"></i>
                    <div class="name">底部_视频</div>
                    <div class="fontclass">.ic-dibushipin</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibutupian"></i>
                    <div class="name">底部_图片</div>
                    <div class="fontclass">.ic-dibutupian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanjudianzan"></i>
                    <div class="name">全局_点赞</div>
                    <div class="fontclass">.ic-quanjudianzan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanjugengduo"></i>
                    <div class="name">全局_更多</div>
                    <div class="fontclass">.ic-quanjugengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-tieziquxiaoguanbi"></i>
                    <div class="name">帖子_取消关闭</div>
                    <div class="fontclass">.ic-tieziquxiaoguanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanjuyizan"></i>
                    <div class="name">全局_已赞</div>
                    <div class="fontclass">.ic-quanjuyizan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibubiaoqianquekou"></i>
                    <div class="name">底部_标签缺口</div>
                    <div class="fontclass">.ic-dibubiaoqianquekou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibugengduogongnengquekou"></i>
                    <div class="name">底部_更多功能缺口</div>
                    <div class="fontclass">.ic-dibugengduogongnengquekou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibujianpanquekou"></i>
                    <div class="name">底部_键盘缺口</div>
                    <div class="fontclass">.ic-dibujianpanquekou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibuluyinxiaoquekou"></i>
                    <div class="name">底部_录音小缺口</div>
                    <div class="fontclass">.ic-dibuluyinxiaoquekou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibushipinquekou"></i>
                    <div class="name">底部_视频缺口</div>
                    <div class="fontclass">.ic-dibushipinquekou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibutupianquekou"></i>
                    <div class="name">底部_图片缺口</div>
                    <div class="fontclass">.ic-dibutupianquekou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-tiezishipinda"></i>
                    <div class="name">帖子_视频大</div>
                    <div class="fontclass">.ic-tiezishipinda</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-tiezishipinquekou"></i>
                    <div class="name">帖子_视频缺口</div>
                    <div class="fontclass">.ic-tiezishipinquekou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-tiezitupianda"></i>
                    <div class="name">帖子_图片大</div>
                    <div class="fontclass">.ic-tiezitupianda</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-tiezitupianquekou"></i>
                    <div class="name">帖子_图片缺口</div>
                    <div class="fontclass">.ic-tiezitupianquekou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-youlexunibi"></i>
                    <div class="name">游乐_虚拟币</div>
                    <div class="fontclass">.ic-youlexunibi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanjufanhui"></i>
                    <div class="name">全局_返回</div>
                    <div class="fontclass">.ic-quanjufanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-wodeguanzhuliang"></i>
                    <div class="name">我的_关注量</div>
                    <div class="fontclass">.ic-wodeguanzhuliang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzituozhuai"></i>
                    <div class="name">音乐_拖动排序</div>
                    <div class="fontclass">.ic-quanzituozhuai</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibozantinghuigu"></i>
                    <div class="name">直播_暂停回顾</div>
                    <div class="fontclass">.ic-zhibozantinghuigu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanjucaidanguanbi"></i>
                    <div class="name"> 全局_菜单关闭</div>
                    <div class="fontclass">.ic-quanjucaidanguanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibotuichu"></i>
                    <div class="name">直播_退出</div>
                    <div class="fontclass">.ic-zhibotuichu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibofanzhuanshexiangtou"></i>
                    <div class="name">直播_翻转摄像头</div>
                    <div class="fontclass">.ic-zhibofanzhuanshexiangtou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibobofanghuigu"></i>
                    <div class="name">直播_播放回顾</div>
                    <div class="fontclass">.ic-zhibobofanghuigu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-yinleyinliang"></i>
                    <div class="name">音乐_音量</div>
                    <div class="fontclass">.ic-yinleyinliang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboxinxiaoxitixing"></i>
                    <div class="name">直播_新消息提醒</div>
                    <div class="fontclass">.ic-zhiboxinxiaoxitixing</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoxihongdian"></i>
                    <div class="name">消息_红点</div>
                    <div class="fontclass">.ic-xiaoxihongdian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoxibeijing"></i>
                    <div class="name">消息_背景</div>
                    <div class="fontclass">.ic-xiaoxibeijing</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-youjiancaidanfenxiang"></i>
                    <div class="name">右键菜单_分享</div>
                    <div class="fontclass">.ic-youjiancaidanfenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoshipinpaishe"></i>
                    <div class="name">小视频_拍摄</div>
                    <div class="fontclass">.ic-xiaoshipinpaishe</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fatieanzhuluyin"></i>
                    <div class="name">发帖_按住录音</div>
                    <div class="fontclass">.ic-fatieanzhuluyin</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibokaiqizhibo"></i>
                    <div class="name">直播_开启直播</div>
                    <div class="fontclass">.ic-zhibokaiqizhibo</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-biaoshisousuo"></i>
                    <div class="name">标识_搜索</div>
                    <div class="fontclass">.ic-biaoshisousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquangongxianbang"></i>
                    <div class="name">粉圈_贡献榜</div>
                    <div class="fontclass">.ic-fenquangongxianbang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquandakairukou"></i>
                    <div class="name">粉圈_打开入口</div>
                    <div class="fontclass">.ic-fenquandakairukou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibodashang"></i>
                    <div class="name">直播_打赏</div>
                    <div class="fontclass">.ic-zhibodashang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibofaliaotian"></i>
                    <div class="name">直播_发聊天</div>
                    <div class="fontclass">.ic-zhibofaliaotian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibogengduo"></i>
                    <div class="name">直播_更多</div>
                    <div class="fontclass">.ic-zhibogengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboxuanji"></i>
                    <div class="name">直播_选集</div>
                    <div class="fontclass">.ic-zhiboxuanji</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dengluzhifubao"></i>
                    <div class="name">登录_支付宝</div>
                    <div class="fontclass">.ic-dengluzhifubao</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dengluqq"></i>
                    <div class="name">登录_QQ</div>
                    <div class="fontclass">.ic-dengluqq</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-denglutaobao"></i>
                    <div class="name">登录_淘宝</div>
                    <div class="fontclass">.ic-denglutaobao</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dengluweixin"></i>
                    <div class="name">登录_微信</div>
                    <div class="fontclass">.ic-dengluweixin</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dengluweibo"></i>
                    <div class="name">登录_微博</div>
                    <div class="fontclass">.ic-dengluweibo</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboshouqiquanping"></i>
                    <div class="name">直播_收起全屏</div>
                    <div class="fontclass">.ic-zhiboshouqiquanping</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboquanping"></i>
                    <div class="name">直播_全屏</div>
                    <div class="fontclass">.ic-zhiboquanping</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-bangdingshouji"></i>
                    <div class="name">绑定_手机</div>
                    <div class="fontclass">.ic-bangdingshouji</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-bangdingyouxiang"></i>
                    <div class="name">绑定_邮箱</div>
                    <div class="fontclass">.ic-bangdingyouxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenxiangda"></i>
                    <div class="name">分享_大</div>
                    <div class="fontclass">.ic-fenxiangda</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dianzanda"></i>
                    <div class="name">点赞_大</div>
                    <div class="fontclass">.ic-dianzanda</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shurukuangjianpan"></i>
                    <div class="name">输入框_键盘</div>
                    <div class="fontclass">.ic-shurukuangjianpan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shurukuangbiaoqing"></i>
                    <div class="name">输入框_表情</div>
                    <div class="fontclass">.ic-shurukuangbiaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibobiaoqing"></i>
                    <div class="name">直播_标清</div>
                    <div class="fontclass">.ic-zhibobiaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibobiaoqingkuang"></i>
                    <div class="name">直播_标清框</div>
                    <div class="fontclass">.ic-zhibobiaoqingkuang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibofadanmu1"></i>
                    <div class="name">直播_发弹幕</div>
                    <div class="fontclass">.ic-zhibofadanmu1</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibogaoqing"></i>
                    <div class="name">直播_高清</div>
                    <div class="fontclass">.ic-zhibogaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibogaoqingkuang"></i>
                    <div class="name">直播_高清框</div>
                    <div class="fontclass">.ic-zhibogaoqingkuang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboliuchang"></i>
                    <div class="name">直播_流畅</div>
                    <div class="fontclass">.ic-zhiboliuchang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboliuchangkuang"></i>
                    <div class="name">直播_流畅框</div>
                    <div class="fontclass">.ic-zhiboliuchangkuang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhiboxiazai"></i>
                    <div class="name">直播_下载</div>
                    <div class="fontclass">.ic-zhiboxiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-youlegongxianzhi"></i>
                    <div class="name">游乐_贡献值</div>
                    <div class="fontclass">.ic-youlegongxianzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanqita"></i>
                    <div class="name">粉圈_其他</div>
                    <div class="fontclass">.ic-fenquanqita</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibochaoqing"></i>
                    <div class="name">直播_超清</div>
                    <div class="fontclass">.ic-zhibochaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibochaoqingkuang"></i>
                    <div class="name">直播_超清框</div>
                    <div class="fontclass">.ic-zhibochaoqingkuang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanjudidian"></i>
                    <div class="name">全局_地点</div>
                    <div class="fontclass">.ic-quanjudidian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanjushijian"></i>
                    <div class="name">全局_时间</div>
                    <div class="fontclass">.ic-quanjushijian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xingchengicontianjiafengmian"></i>
                    <div class="name">行程_icon_添加封面</div>
                    <div class="fontclass">.ic-xingchengicontianjiafengmian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fatierukouxingcheng"></i>
                    <div class="name">发帖入口_行程</div>
                    <div class="fontclass">.ic-fatierukouxingcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanjifenzhongchou"></i>
                    <div class="name">粉圈_积分众筹</div>
                    <div class="fontclass">.ic-fenquanjifenzhongchou</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanheimingdanguanli24"></i>
                    <div class="name">粉圈_黑名单管理_24</div>
                    <div class="fontclass">.ic-fenquanheimingdanguanli24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanneirongguanli24"></i>
                    <div class="name">粉圈_内容管理_24</div>
                    <div class="fontclass">.ic-fenquanneirongguanli24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanbenzhouxingcheng24"></i>
                    <div class="name">粉圈_本周行程_24</div>
                    <div class="fontclass">.ic-fenquanbenzhouxingcheng24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanzhongchouhuodong24"></i>
                    <div class="name">粉圈_众筹活动_24</div>
                    <div class="fontclass">.ic-fenquanzhongchouhuodong24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanjinyanguanli24"></i>
                    <div class="name">粉圈_禁言管理_24</div>
                    <div class="fontclass">.ic-fenquanjinyanguanli24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanjinghuatie24"></i>
                    <div class="name">粉圈_精华帖_24</div>
                    <div class="fontclass">.ic-fenquanjinghuatie24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquantuanduirizhi24"></i>
                    <div class="name">粉圈_团队日志_24</div>
                    <div class="fontclass">.ic-fenquantuanduirizhi24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanxingchengshenhe24"></i>
                    <div class="name">粉圈_行程审核_24</div>
                    <div class="fontclass">.ic-fenquanxingchengshenhe24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanbenzhougongxianbang24"></i>
                    <div class="name">粉圈_本周贡献榜_24</div>
                    <div class="fontclass">.ic-fenquanbenzhougongxianbang24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-mingxingxingchengiconshanchu"></i>
                    <div class="name">明星行程_icon_删除</div>
                    <div class="fontclass">.ic-mingxingxingchengiconshanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquanredu"></i>
                    <div class="name">粉圈_热度</div>
                    <div class="fontclass">.ic-fenquanredu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibokaiqidanmu"></i>
                    <div class="name">直播_开启弹幕</div>
                    <div class="fontclass">.ic-zhibokaiqidanmu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-zhibopingbidanmu"></i>
                    <div class="name">直播_屏蔽弹幕</div>
                    <div class="fontclass">.ic-zhibopingbidanmu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shurukuangxiangji"></i>
                    <div class="name">输入框_相机</div>
                    <div class="fontclass">.ic-shurukuangxiangji</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzidianzan24"></i>
                    <div class="name">圈子_点赞24</div>
                    <div class="fontclass">.ic-quanzidianzan24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzifenxiang24"></i>
                    <div class="name">圈子_分享24</div>
                    <div class="fontclass">.ic-quanzifenxiang24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzipinglunshu24"></i>
                    <div class="name">圈子_评论数24</div>
                    <div class="fontclass">.ic-quanzipinglunshu24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanziyizan24"></i>
                    <div class="name">圈子_已赞24</div>
                    <div class="fontclass">.ic-quanziyizan24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shurukuang"></i>
                    <div class="name">输入框_@</div>
                    <div class="fontclass">.ic-shurukuang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shipin_yinliang"></i>
                    <div class="name">视频_音量</div>
                    <div class="fontclass">.ic-shipin_yinliang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shipin_kuaijin"></i>
                    <div class="name">视频_快进</div>
                    <div class="fontclass">.ic-shipin_kuaijin</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shipin_liangdu"></i>
                    <div class="name">视频_亮度</div>
                    <div class="fontclass">.ic-shipin_liangdu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shipin_jingyin"></i>
                    <div class="name">视频_静音</div>
                    <div class="fontclass">.ic-shipin_jingyin</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shipin_kuaitui"></i>
                    <div class="name">视频_快退</div>
                    <div class="fontclass">.ic-shipin_kuaitui</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_yueduliang"></i>
                    <div class="name">圈子_阅读量</div>
                    <div class="fontclass">.ic-quanzi_yueduliang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shouye_pinglun"></i>
                    <div class="name">首页_评论</div>
                    <div class="fontclass">.ic-shouye_pinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shouye_yizan"></i>
                    <div class="name">首页_已赞</div>
                    <div class="fontclass">.ic-shouye_yizan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shouye_fenxiang"></i>
                    <div class="name">首页_分享</div>
                    <div class="fontclass">.ic-shouye_fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shouye_jifen"></i>
                    <div class="name">首页_积分</div>
                    <div class="fontclass">.ic-shouye_jifen</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shouye_dianzan"></i>
                    <div class="name">首页_点赞</div>
                    <div class="fontclass">.ic-shouye_dianzan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_gongxianzhi"></i>
                    <div class="name">圈子_贡献值</div>
                    <div class="fontclass">.ic-quanzi_gongxianzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanju_zanting"></i>
                    <div class="name">全局_暂停</div>
                    <div class="fontclass">.ic-quanju_zanting</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-daohang_richeng"></i>
                    <div class="name">导航_日程</div>
                    <div class="fontclass">.ic-daohang_richeng</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanju_bofang"></i>
                    <div class="name">全局_播放</div>
                    <div class="fontclass">.ic-quanju_bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-daohang_xiaoxi"></i>
                    <div class="name">导航_消息</div>
                    <div class="fontclass">.ic-daohang_xiaoxi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shipin_bofangliang"></i>
                    <div class="name">视频_播放量</div>
                    <div class="fontclass">.ic-shipin_bofangliang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanju_sousuo"></i>
                    <div class="name">全局_搜索</div>
                    <div class="fontclass">.ic-quanju_sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_wode_p"></i>
                    <div class="name">底部_我的_p</div>
                    <div class="fontclass">.ic-dibu_wode_p</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_jinquan_p"></i>
                    <div class="name">底部_进圈_p</div>
                    <div class="fontclass">.ic-dibu_jinquan_p</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_guangchang_p"></i>
                    <div class="name">底部_广场_p</div>
                    <div class="fontclass">.ic-dibu_guangchang_p</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_wode_n"></i>
                    <div class="name">底部_我的_n</div>
                    <div class="fontclass">.ic-dibu_wode_n</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_guangchang_n"></i>
                    <div class="name">底部_广场_n</div>
                    <div class="fontclass">.ic-dibu_guangchang_n</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_jinquan_n"></i>
                    <div class="name">底部_进圈_n</div>
                    <div class="fontclass">.ic-dibu_jinquan_n</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_shouye_n"></i>
                    <div class="name">底部_首页_n</div>
                    <div class="fontclass">.ic-dibu_shouye_n</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_shouye_p"></i>
                    <div class="name">底部_首页_p</div>
                    <div class="fontclass">.ic-dibu_shouye_p</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_fabu"></i>
                    <div class="name">底部_发布</div>
                    <div class="fontclass">.ic-dibu_fabu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanju_xuanquan"></i>
                    <div class="name">全局_选圈</div>
                    <div class="fontclass">.ic-quanju_xuanquan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_redu"></i>
                    <div class="name">圈子_热度</div>
                    <div class="fontclass">.ic-quanzi_redu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanju_xuanzhong"></i>
                    <div class="name">全局_选中</div>
                    <div class="fontclass">.ic-quanju_xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_renshu"></i>
                    <div class="name">圈子_人数</div>
                    <div class="fontclass">.ic-quanzi_renshu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-sousuo_didian24"></i>
                    <div class="name">搜索_地点24</div>
                    <div class="fontclass">.ic-sousuo_didian24</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiangce_xiazaiyuantu"></i>
                    <div class="name">相册_下载原图</div>
                    <div class="fontclass">.ic-xiangce_xiazaiyuantu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_didian16"></i>
                    <div class="name">圈子_地点16</div>
                    <div class="fontclass">.ic-quanzi_didian16</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-denglu_xianshimima"></i>
                    <div class="name">登录_显示密码</div>
                    <div class="fontclass">.ic-denglu_xianshimima</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-guangchang_pinglunshu"></i>
                    <div class="name">广场_评论数</div>
                    <div class="fontclass">.ic-guangchang_pinglunshu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_huanyihuan"></i>
                    <div class="name">圈子_换一换</div>
                    <div class="fontclass">.ic-quanzi_huanyihuan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-wode_xiaoxi"></i>
                    <div class="name">我的_消息</div>
                    <div class="fontclass">.ic-wode_xiaoxi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-denglu_gengduozhankai"></i>
                    <div class="name">登录_更多展开</div>
                    <div class="fontclass">.ic-denglu_gengduozhankai</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-denglu_gengduoshouqi"></i>
                    <div class="name">登录_更多收起</div>
                    <div class="fontclass">.ic-denglu_gengduoshouqi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-wode_jiaguanzhu"></i>
                    <div class="name">我的_加关注</div>
                    <div class="fontclass">.ic-wode_jiaguanzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-wode_bianji"></i>
                    <div class="name">我的_编辑</div>
                    <div class="fontclass">.ic-wode_bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fabu_shanchu"></i>
                    <div class="name">发布_删除</div>
                    <div class="fontclass">.ic-fabu_shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiangce_qidongxiangji"></i>
                    <div class="name">相册_启动相机</div>
                    <div class="fontclass">.ic-xiangce_qidongxiangji</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_tianjiatupian241"></i>
                    <div class="name">圈子_添加图片24</div>
                    <div class="fontclass">.ic-quanzi_tianjiatupian241</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_tianjiatupian321"></i>
                    <div class="name">圈子_添加图片32</div>
                    <div class="fontclass">.ic-quanzi_tianjiatupian321</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_daoxu"></i>
                    <div class="name">圈子_倒序</div>
                    <div class="fontclass">.ic-quanzi_daoxu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanju_gouxuan"></i>
                    <div class="name">全局_勾选</div>
                    <div class="fontclass">.ic-quanju_gouxuan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-wodeyiguanzhu"></i>
                    <div class="name">我的_已关注</div>
                    <div class="fontclass">.ic-wodeyiguanzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_qita"></i>
                    <div class="name">圈子_其他</div>
                    <div class="fontclass">.ic-quanzi_qita</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_hangcheng"></i>
                    <div class="name">圈子_行程</div>
                    <div class="fontclass">.ic-quanzi_hangcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanju_shipinbiaoqian"></i>
                    <div class="name">全局_视频标签</div>
                    <div class="fontclass">.ic-quanju_shipinbiaoqian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquan_zhongxindingwei"></i>
                    <div class="name">粉圈_重新定位</div>
                    <div class="fontclass">.ic-fenquan_zhongxindingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanju_bangzhu"></i>
                    <div class="name">全局_帮助</div>
                    <div class="fontclass">.ic-quanju_bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_shouqijianpan"></i>
                    <div class="name">底部_收起键盘</div>
                    <div class="fontclass">.ic-dibu_shouqijianpan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-sousuo_zhaopianshu"></i>
                    <div class="name"> 搜索_照片数</div>
                    <div class="fontclass">.ic-sousuo_zhaopianshu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-sousuo_dingyue"></i>
                    <div class="name"> 搜索_订阅</div>
                    <div class="fontclass">.ic-sousuo_dingyue</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoxi_xitong"></i>
                    <div class="name">消息_系统</div>
                    <div class="fontclass">.ic-xiaoxi_xitong</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoxi_huodong"></i>
                    <div class="name">消息_活动</div>
                    <div class="fontclass">.ic-xiaoxi_huodong</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoxi_wode"></i>
                    <div class="name">消息_@我的</div>
                    <div class="fontclass">.ic-xiaoxi_wode</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoxi_jiaoyi"></i>
                    <div class="name">消息_交易</div>
                    <div class="fontclass">.ic-xiaoxi_jiaoyi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoxi_quanzi"></i>
                    <div class="name">消息_圈子</div>
                    <div class="fontclass">.ic-xiaoxi_quanzi</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoxi_yonghu"></i>
                    <div class="name">消息_用户</div>
                    <div class="fontclass">.ic-xiaoxi_yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiaoxi_fenxiang"></i>
                    <div class="name">消息_分享</div>
                    <div class="fontclass">.ic-xiaoxi_fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_fenxiang"></i>
                    <div class="name">底部_分享</div>
                    <div class="fontclass">.ic-dibu_fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_dianzan"></i>
                    <div class="name">底部_点赞</div>
                    <div class="fontclass">.ic-dibu_dianzan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_guanli"></i>
                    <div class="name">圈子_管理</div>
                    <div class="fontclass">.ic-quanzi_guanli</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_tianxiejiyu"></i>
                    <div class="name">圈子_填写寄语</div>
                    <div class="fontclass">.ic-quanzi_tianxiejiyu</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-quanzi_qiapiantupian"></i>
                    <div class="name">圈子_卡片图片</div>
                    <div class="fontclass">.ic-quanzi_qiapiantupian</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquan_shaixuan"></i>
                    <div class="name">粉圈_筛选</div>
                    <div class="fontclass">.ic-fenquan_shaixuan</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquan_kaiqidongtai"></i>
                    <div class="name">粉圈_开启动态</div>
                    <div class="fontclass">.ic-fenquan_kaiqidongtai</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquan_hudong"></i>
                    <div class="name">粉圈_互动</div>
                    <div class="fontclass">.ic-fenquan_hudong</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fenquan_guanbidongtai"></i>
                    <div class="name">粉圈_关闭动态</div>
                    <div class="fontclass">.ic-fenquan_guanbidongtai</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shipin_tuichuquanping"></i>
                    <div class="name">视频_退出全屏</div>
                    <div class="fontclass">.ic-shipin_tuichuquanping</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shipin_fabiaopinglun"></i>
                    <div class="name">视频_发表评论</div>
                    <div class="fontclass">.ic-shipin_fabiaopinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-shipin_quanping"></i>
                    <div class="name">视频_全屏</div>
                    <div class="fontclass">.ic-shipin_quanping</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-fensi_mingxing"></i>
                    <div class="name">粉丝_明星</div>
                    <div class="fontclass">.ic-fensi_mingxing</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-xiangzuo"></i>
                    <div class="name">向左</div>
                    <div class="fontclass">.ic-xiangzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont ic-dibu_gif"></i>
                    <div class="name">底部_gif</div>
                    <div class="fontclass">.ic-dibu_gif</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">ic-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
